<template>
  <div class="container">
    <div class="title">中山先行示范区</div>
    <div class="map">
      <OlArc></OlArc> 
      <div class="count">
        <div class="count-item">
          <div class="value">{{ countInfoData.hdMile || "--" }}公里</div>
          <div class="name">航道里程数</div>
        </div>
        <div class="count-item">
          <div class="value">{{ countInfoData.bgNum || "--" }}座</div>
          <div class="name">桥梁总数</div>
        </div>
      </div>  
      <!-- 图例 -->
      <div class="overall-legend">
        <div class="overall-legend-item">
          <img src="../../static/images/bridgeAreaControl/dabiaoQl.png" alt="" />
          净高已达标桥梁
        </div>
        <div class="overall-legend-item">
          <img src="../../static/images/bridgeAreaControl/dabiaoBQl.png" alt="" />
          净高未达标桥梁
        </div>
      </div>
    </div>
    <div class="selected">
      <el-select
        v-model="bridge"
        filterable
        placeholder="请选择桥梁"
        style="width: 100%"
        @change="bridgeChange"
      >
        <el-option
          v-for="item in bridgeListData"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </div>
    <div class="sub-title">桥梁基本信息</div>
    <div class="image">
      <van-empty
        image-size="100"
        description="暂无图片"
        v-if="!imgUrl"    
      />
      <img v-else :src="imgUrl" alt="" />
    </div>
    <div class="bridge-main-content">
      <div class="bridge-info">
        <div class="bridge-info-item" :style="!showItemShowBox ? 'overflow: hidden;' : 'overflow: visible;'">
          <div class="item-head">
            <div class="head-title">所属航道</div>
            <div class="head-icon" @click="showItemMainFalse(), (showItemShowBox = true)">
              <img src="../../static/images/bridgeAreaControl/icon_show.png" alt="" />
            </div>
          </div>
          <div class="item-empty" v-if="!bridgeBaseInfoData.cHangdao">暂无数据</div>
          <div class="item-sshd" v-else>
            <div class="item-title">{{ bridgeBaseInfoData.cHangdao || "--" }}</div>
            <div class="city">{{ bridgeBaseInfoData.cAddress || "--" }}</div>
          </div>
          <div class="bridge-info-item-showBox" v-if="showItemShowBox">
            <div class="item-head">
              <div class="head-title">基本信息</div>
              <div class="head-icon" @click="showItemShowBox = false">
                <img src="../../static/images/bridgeAreaControl/icon_hidden.png" alt="" />
              </div>
            </div>
            <div class="item-couplet">
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">桥梁名称</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.bridgeName || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">桥梁类型</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cBridgelx || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">建设单位</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cBridgegldw || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">地理位置</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cAddress || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">所属航道</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cHangdao || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">所在航道等级</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.hangdaoLevel || "--" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bridge-info-item" :style="!showItemShowBox2 ? 'overflow: hidden;' : 'overflow: visible;'">
          <div class="item-head">
            <div class="head-title">桥梁画像</div>
          </div>
          <div class="item-couplet">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">通航净宽</div>
              <div class="ITEM-right">
                <template v-if="bridgePortraitData.wide">
                  <img
                    v-if="bridgePortraitData.wide == '是'"
                    src="../../static/images/bridgeAreaControl/icon_dabiao.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../../static/images/bridgeAreaControl/icon_budabiao.png"
                    alt=""
                  />
                </template>
                <template v-else> -- </template>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">通航净高</div>
              <div class="ITEM-right">
                <template v-if="bridgePortraitData.high">
                  <img
                    v-if="bridgePortraitData.high == '是'"
                    src="../../static/images/bridgeAreaControl/icon_dabiao.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../../static/images/bridgeAreaControl/icon_budabiao.png"
                    alt=""
                  />
                </template>
                <template v-else> -- </template>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">设标情况</div>
              <div class="ITEM-right">
                <template v-if="bridgePortraitData.shebiao">
                  <img
                    v-if="bridgePortraitData.shebiao == '是'"
                    src="../../static/images/bridgeAreaControl/icon_dabiao.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../../static/images/bridgeAreaControl/icon_budabiao.png"
                    alt=""
                  />
                </template>
                <template v-else> -- </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>   
    <div class="sub-title">航保信息</div>
    <div class="bridge-main-content">
      <div class="bridge-info">
        <div class="bridge-info-item" :style="!showItemShowBox3 ? 'overflow: hidden;' : 'overflow: visible;'">
          <div class="item-head">
            <div class="head-title">通航孔</div>
            <div
              class="head-icon"
              @click="showItemMainFalse(), (showItemShowBox3 = true)"
            >
              <img src="../../static/images/bridgeAreaControl/icon_show.png" alt="" />
            </div>
          </div>
          <div class="item-couplet" style="margin-top: 10px">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">通航孔</div>
              <div class="ITEM-right">
                {{ bridgeWaterwayRiskData.tonghangnum || "--" }}
                <span class="unit">个</span>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">实测通航净高</div>
              <div class="ITEM-right">
                {{ bridgeWaterwayRiskData.shicetongh?.toFixed(1) || "--"
                }}<span class="unit">m</span>
              </div>
            </div>
          </div>
          <div class="bridge-info-item-showBox" v-if="showItemShowBox3">
            <div class="item-head">
              <div class="head-title">通航孔</div>
              <div class="head-icon" @click="showItemShowBox3 = false">
                <img src="../../static/images/bridgeAreaControl/icon_hidden.png" alt="" />
              </div>
            </div>
            <div class="item-couplet">
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">单向/双向通行</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.tonghangkong[0]?.tonghangkGz || "--" }}/{{ bridgeWaterwayRiskData.tonghangkong[1]?.tonghangkGz || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">通航孔数量</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.tonghangnum || "--" }}个
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">设计最高通航水位</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.shejizuigao || "--" }}m
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">实时通航净高</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.shicetongh || "--" }}m
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">预警情况</div>
          </div>
          <div class="item-couplet">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">超高统计</div>
              <div class="ITEM-right" style="color: #f13939">
                {{
                  yawStatisticsData.total_num[0]?.chaogaoAlarm.toString() ||
                  "--"
                }}
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">超速统计</div>
              <div class="ITEM-right" style="color: #f13939">
                {{
                  yawStatisticsData.total_num[0]?.chaosuAlarm.toString() || "--"
                }}
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">偏航统计</div>
              <div class="ITEM-right" style="color: #f13939">
                {{
                  yawStatisticsData.total_num[0]?.pianhangAlarm.toString() ||
                  "--"
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="bridge-info-item" style="width: 100%;margin-top: 10px;">
          <div class="item-head">
            <div class="head-title">水位情况</div>
            <div
              class="head-more"
              @click="clickswqk"
              v-if="bgWaterSitData?.name"
            >
              更多
              <img src="../../static/images/bridgeAreaControl/icon_more.png" alt="" />
            </div>
          </div>
          <div class="item-empty" v-if="!bgWaterSitData?.name">暂无数据</div>
          <div class="item-swqk" v-else>
            <div class="swqk-name">{{ bgWaterSitData?.name || "--" }}</div>
            <div class="swqk-value">
              {{ bgWaterSitData?.swz || "--" }} <span class="unit">m</span>
              <span class="swqk-ss">实时</span>
            </div>
          </div>
        </div>
        <div class="bridge-info-item" style="width: 100%;height: 300px;margin-top: 10px;">
          <div class="item-head">
            <div class="head-title">风速情况</div>            
          </div>
          <div id="lineChart1" style="height: 260px;"></div>
        </div>
        <div class="bridge-info-item" style="width: 100%;height: 300px;margin-top: 10px;">
          <div class="item-head">
            <div class="head-title">能见度情况</div>
          </div>
          <div id="lineChart2" style="height: 260px;"></div>
        </div>
      </div>
    </div>
    <div class="sub-title" style="display: flex;justify-content: space-between;align-items: center;">
      <div>通航情况</div>
      <el-select
        v-model="selectType"
        filterable
        placeholder="请选择"
        class="selectTypeClass"
        @change="setSelectType"
        style="width: 180px;margin-right: 20px;font-weight: 400;"
      >
        <el-option
          v-for="item in selectTypeList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="bridge-list-container">
      <div class="bridge-list">
        <div class="item-situation">
          <div class="situation-tabs">
            <div
              class="tabs-item"
              v-for="item in cbtsActiveList"
              :key="item.name"
              :class="cbllActive == item.value ? 'active' : ''"
              @click="(cbllActive = item.value), getshipllAnalysDataFn()"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="situation-echart2">
            <div class="echart" id="echart2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, nextTick } from "vue";
  import { useRouter } from "vue-router";
  //地图
  import OlArc from "./component/zhongshan_map.vue";
  //引入api
  import {
    baseInfo, //统计
    bgList, //桥梁列表
    bridgeBaseInfo, //桥梁基本信息
    getBgPic, //获取桥梁图片
    bridgePortraitZhongshan, //桥梁画像
    bridgeWaterwayRisk, //通航孔
    yawStatistics, //预警情况
    bgWaterSit, //水位情况
    windSpeed, //风速情况
    nengjiandu, //能见度情况
    //通航情况
    shipllAnalys,
    shipllAnalysWeek,
    shipllAnalysMonth,
    shipllAnalysYear,
  } from "@/bridge-h5/utils/bridgeAreaControlApi";
  const router = useRouter();
  //引入echarts
  import { TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, DataZoomComponent, TitleComponent, } from "echarts/components";
  import { BarChart, PieChart, LineChart } from "echarts/charts";
  import { CanvasRenderer } from "echarts/renderers";
  import * as echarts from "echarts/core";
import { color } from "echarts";
  echarts.use([ TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, BarChart, PieChart, LineChart, CanvasRenderer, TitleComponent, DataZoomComponent, ]);

  //统计
  const countInfoData = ref({});
  const countInfoFn = () => {
    baseInfo().then((res) => {
      if(res.code === 200){
        countInfoData.value = res.data;
      }
    });
  };

  //桥梁列表
  const bridge = ref("");
  const bridgeListData = ref([]);
  const bgListFn = () => {
    bgList().then((res) => {
      if(res.code === 200){
        // bridge.value = res.data[0].name;
        bridge.value = "中山港大桥";
        bridgeListData.value = res.data;
        bridgeBaseInfoFn();
        getImgUrlFn();
        getbridgePortraitFn();
        getbridgeWaterwayRiskFn();
        yawStatisticsFn();
        getbgWaterSitFn();
        windSpeedFn();
        nengjianduFn();
        getshipllAnalysDataFn();
      }
    });
  };
  const bridgeChange = () => {
    bridgeBaseInfoFn();
    getImgUrlFn();
    getbridgePortraitFn();
    getbridgeWaterwayRiskFn();
    yawStatisticsFn();
    getbgWaterSitFn();
    windSpeedFn();
    nengjianduFn();
    getshipllAnalysDataFn();
  };

  //桥梁基本信息
  const bridgeBaseInfoData = ref([]);
  const bridgeBaseInfoFn = () => {
    bridgeBaseInfo({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        bridgeBaseInfoData.value = res.data[0];
      }
    });
  };
  //桥梁图片
  const imgUrl = ref("");
  const getImgUrlFn = () => {
    getBgPic({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.picUrl.length === 0) {
        imgUrl.value = "";        
      }else{
        imgUrl.value = `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;   
      }
    });
  };
  const showItemShowBox = ref(false);
  const showItemShowBox2 = ref(false);
  const showItemShowBox3 = ref(false);
  const showItemMainFalse = () => {
    showItemShowBox.value = false;
    showItemShowBox2.value = false;
    showItemShowBox3.value = false;
  };
  //桥梁画像
  const bridgePortraitData = ref({});
  const getbridgePortraitFn = () => {
    bridgePortraitZhongshan({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200 && res.data) {
        bridgePortraitData.value = res.data;
      }
    });    
  };
  //通航孔
  const bridgeWaterwayRiskData = ref({});
  const getbridgeWaterwayRiskFn = () => {
    bridgeWaterwayRisk({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200 && res.data) {
        bridgeWaterwayRiskData.value = res.data;
      }
    });
  };
  //预警情况
  const yawStatisticsData = ref({
    total_num: [],
  });
  const yawStatisticsFn = () => {
    yawStatistics({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200) {
        yawStatisticsData.value = res.data;
      }
    });
  };
  //水位情况
  const bgWaterSitData = ref({});
  const getbgWaterSitFn = () => {
    bgWaterSit({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200) {
        bgWaterSitData.value = res.data[0];
      }
    });
  };
  const clickswqk = () => {
    router.push({
      path: "/bridgeSwqkZhongshan",
      query: { bridge: bridge.value, type: "bridge" },
    });
  };
  //风速情况
  const windSpeedFn = () => {
    windSpeed({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200) {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          xAxisData.push(item.sj);
          seriesData.push(item.avgWindSpeed);
        });
        initLineChart1(xAxisData,seriesData);
      }
    });
  };
  const initLineChart1 = (xAxisData,seriesData) => {
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("lineChart1"));

    let option;
    if(xAxisData.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            color: "#8c8c8c",
            fontSize: 12,
            fontWeight: 500
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: "axis",
          confine: true, //限制在图表区域内
        },
        grid: {
          top: "40px",
          left: "50px",
          right: "30px",
          bottom: "45px",
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 10,
            zoomLock: false,
          },
        ],
        xAxis: {
          type: "category",
          data: xAxisData,
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "10px",
            color: "rgba(0,0,0,0.45)",
          },
          axisLabel: {
            interval: 0,
            rotate: -30, //倾斜的程度
          },
        },
        yAxis: {
          name: "风速（m/s）",
          type: "value",
        },
        series: [
          {
            name: "风速(m/s)",
            data: seriesData,
            type: "line",
            color: "#6B9BFD",
          },
        ],
      };
    }
    option && lineChart.setOption(option);
  };
  //能见度情况
  const nengjianduFn = () => {
    nengjiandu({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200) {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          xAxisData.push(item.sj);
          seriesData.push(item.njdValue);
        });
        initLineChart2(xAxisData,seriesData);
      }
    });
  };
  const initLineChart2 = (xAxisData,seriesData) => {
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart2"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("lineChart2"));

    let option;
    if(xAxisData.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            color: "#8c8c8c",
            fontSize: 12,
            fontWeight: 500
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: "axis",
          confine: true, //限制在图表区域内
        },
        grid: {
          top: "40px",
          left: "50px",
          right: "30px",
          bottom: "45px",
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 10,
            zoomLock: false,
          },
        ],
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: -30, //倾斜的程度
          },
        },
        yAxis: {
          name: "能见度（m）",
          type: "value",
        },
        series: [
          {
            name: "能见度(m)",
            data: seriesData,
            type: "line",
            color: "#6B9BFD",
          },
        ],
      };
    }
    option && lineChart.setOption(option);
  };
  //通航情况
  const selectType = ref(1);
  const selectTypeList = ref([
    {
      value: 1,
      name: "上下行船舶统计",
    },
    {
      value: 2,
      name: "空重载船舶统计",
    },
  ]);
  const cbllActive = ref(1);
  const cbtsActiveList = ref([
    {
      title: "当天",
      value: "0",
    },
    {
      title: "当周",
      value: "1",
    },
    {
      title: "当月",
      value: "2",
    },
    {
      title: "当年",
      value: "3",
    },
  ]);
  const getshipllAnalysDataFn = () => {
    let reqData = { 
      type: selectType.value,
      bridge: bridge.value
    };
    if (cbllActive.value == "0") {
      shipllAnalys(reqData).then((res) => {
        getshipllAnalysDataFnRes(res);
      });
    } else if (cbllActive.value == "1") {
      shipllAnalysWeek(reqData).then((res) => {
        getshipllAnalysDataFnRes(res);
      });
    } else if (cbllActive.value == "2") {
      shipllAnalysMonth(reqData) .then((res) => {
        getshipllAnalysDataFnRes(res);
      });
    } else if (cbllActive.value == "3") {
      shipllAnalysYear(reqData).then((res) => {
        getshipllAnalysDataFnRes(res);
      });
    }
  };
  const setSelectType = () => {
    getshipllAnalysDataFn();
  };
  const shipllAnalysData = ref([]);
  const getshipllAnalysDataFnRes = (res) => {
    if (res.code === 200 && res.data) {
      res.data?.forEach((ele) => {
        ele.tgsj = ele.tgsj.length > 7 ? ele.tgsj?.slice(5, 10) : ele.tgsj;
      });
      shipllAnalysData.value = res.data;
      setTimeout(() => {
        initeChart2();
      }, 100);
    }
  };
  const initeChart2 = () => {
    nextTick(() => {
      let barChart = echarts.getInstanceByDom(document.getElementById("echart2"));
      if (barChart == null) {
        barChart = echarts.init(document.getElementById("echart2"));
      }
      let option;
      let rawDataTitle = [];
      let rawData = [[], []];
      shipllAnalysData.value?.forEach((ele) => {
        rawData[0].push(ele.up);
        rawData[1].push(ele.down);
        rawDataTitle.push(ele.tgsj);
      });

      const totalData = [];
      for (let i = 0; i < rawData[0].length; ++i) {
        let sum = 0;
        for (let j = 0; j < rawData.length; ++j) {
          sum += rawData[j][i];
        }
        totalData.push(sum);
      }
      const series = ["Direct", "Mail Ad"].map((name, sid) => {
        return {
          name,
          type: "bar",
          stack: "total",
          barWidth: "60%",
          label: {
            show: true,
            formatter: (params) => Math.round(params.value * 1000) / 10 + "%",
          },
          data: rawData[sid].map((d, did) =>
            totalData[did] <= 0 ? 0 : d / totalData[did]
          ),
        };
      });
      if(rawDataTitle.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              color: "#8c8c8c",
              fontSize: 12,
              fontWeight: 500
            }
          }
        };
      }else{
        option = {
          tooltip: {
            // trigger: "axis",
            trigger: "item",
            axisPointer: {
              type: "shadow",
            },
            confine: true, //限制在图表区域内
          },
          legend: {
            itemWidth: 6, // 设置图例项的宽度
            itemHeight: 6, // 设置图例项的高度
            textStyle: {
              fontSize: "12px",
              color: "rgba(0,0,0,0.85)",
            },
            itemGap: 4,
            icon: "circle", //图例设置成圆形
          },
          grid: {
            top: "20%",
            left: "15%",
            right: "15%",
            bottom: "10%",
            containLabel: true,
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              // maxValueSpan: 12,
              startValue: 0,
              endValue: 9,
              zoomLock: false,
            },
          ],
          xAxis: [
            {
              type: "category",
              nameTextStyle: {
                fontWeight: "500",
                fontSize: "10px",
                color: "rgba(0,0,0,0.45)",
              },
              data: rawDataTitle,
              axisTick: {
                alignWithLabel: true, //控制刻度线是否与刻度标签对齐
                show: false, //是否显示刻度线
              },
              axisLabel: {
                interval: 0,
                rotate: -45, //倾斜的程度
              },
              axisPointer: {
                show: true,
                type: "none",
                label: {
                  show: false,
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "船舶流量(艘)",
              nameTextStyle: {
                fontWeight: "500",
                fontSize: "14px",
                color: "rgba(0,0,0,0.45)",
              },
              // nameLocation: "center",
              nameGap: 15,
            },
          ],
          series: [
            {
              name: "上行",
              type: "bar",
              emphasis: {
                focus: "series",
              },
              stack: "Ad",
              barWidth: 10,
              color: "#6b9bfd",
              data: rawData[0],
            },
            {
              name: "下行",
              type: "bar",
              emphasis: {
                focus: "series",
              },
              stack: "Ad",
              barWidth: 10,
              color: "#4ed9a0",
              data: rawData[1],
            },
          ],
        };
      }
      option && barChart.setOption(option);
    });
  };
  onMounted(() => {
    countInfoFn();
    bgListFn();
  });
</script>

<style lang="scss" scoped>
  .container{    
    height: 100%;
    width: 100%;
    position: relative;
    .title{
      height: 68px;
      background-image: url('../../static/images/bridgeAreaControl/bg_zhuanti.png');
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 500; 
      color: #fff;   
    }
    .map{
      height: 300px;
      position: relative;
      margin-bottom: 20px;
      .count{
        position: absolute;       
        left: 8px;
        bottom: 8px;
        width: 60px;
        height: 70px;
        background: #FFFFFF;
        border-radius: 4px;
        font-size: 12px; 
        padding: 6px;       
        .count-item{
          margin-bottom: 4px;
          .value{
            color: #262626;
            font-weight: bold;
          }
          .name{
            color: #595959;
            font-weight: 400;
          }
        }        
      }
      .overall-legend {
        position: absolute;        
        right: 8px;
        bottom: 8px;
        background: #FFFFFF;
        border-radius: 4px;
        z-index: 10;
        width: 110px;
        height: 50px;
        padding: 6px;
        box-sizing: border-box;
        .overall-legend-item {
          display: flex;
          align-items: center;
          font-size: 12px;
          img {
            width: 10px;
            height: 12px;
            margin-right: 2px;
          }
        }
        .overall-legend-item:nth-child(2) {
          margin-top: 8px;
        }
      }
    }
    .selected{
      margin: 16px 20px;
    }
    .sub-title{     
      font-size: 18px;
      color: #2A8BFD;
      font-weight: 600;
      margin-left: 20px;
      position: relative;
      padding-left: 10px;
    }
    .sub-title::before{
      content: '';
      background-color: #2A8BFD;
      position: absolute;
      top: 50%;
      left: 0;
      height: 17px;
      width: 4px;
      transform: translateY(-50%);
    }
    .image{
      height: 200px;
      width: 100%;
      text-align: center;
      margin-top: 10px;
      img{
        width: 90%;
        height: 100%;
      }
    }
    .bridge-main-content {      
      padding: 16px 20px;
      box-sizing: border-box;
      .bridge-info {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;         
        .bridge-info-item {
          overflow: hidden;
          width: calc(50% - 5px);
          box-sizing: border-box;
          position: relative;
          height: 130px;
          background: #ffffff;
          border-radius: 8px 8px 8px 8px;
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
          .item-head {
            display: flex;
            justify-content: space-between;
            position: relative;
            background: rgba(22, 93, 255, 0.05);
            height: 36px;
            color: #262626;
            padding: 0 8px;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;
            .head-title {
              font-size: 14px;
            }
            .head-icon {
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .head-more {
              display: flex;
              align-items: center;
              color: #abadb1;
              font-size: 12px;
              img {
                width: 4px;
                height: 6px;
                margin-left: 4px;
              }
            }
          }
          .item-sshd {
            padding: 0 8px;
            box-sizing: border-box;
            .item-title {
              color: #595959;
              font-size: 24px;
              line-height: 36px;
              margin-top: 16px;
              font-weight: 800;
              text-align: center;
            }
            .city {
              margin-top: 14px;
              color: rgba(0, 0, 0, 0.45);
              line-height: 24px;
              text-align: right;
            }
          }
          .item-swqk {
            padding: 0 8px;
            box-sizing: border-box;
            text-align: center;
            .swqk-name {
              font-weight: 400;
              margin-top: 16px;
              color: #8c8c8c;
              height: 20px;
              font-size: 14px;
            }
            .swqk-value {
              margin-top: 8px;
              color: #266fe8;
              font-size: 24px;
              .unit {
                color: #a4a4a4;
                font-size: 20px;
              }
              .swqk-ss {
                margin-left: 4px;
                background: rgba(78, 217, 160, 0.1);
                border-radius: 4px 4px 4px 4px;
                padding: 2px 3px;
                opacity: 1;
                font-size: 12px;
                color: #4ed9a0;
              }
            }
          }
          .item-cbmd {
            padding: 0 8px;
            box-sizing: border-box;
            text-align: center;
            .title {
              color: rgba(0, 0, 0, 0.45);
              font-size: 14px;
              line-height: 19px;
              font-weight: 400;
              margin-top: 16px;
            }
            .value {
              margin-top: 4px;
              color: #266fe8;
              line-height: 24px;
              font-size: 24px;
              font-weight: bold;
            }
          }
          .item-chart {
            margin-top: 5px;
            height: 75px;
            width: 100%;
          }
          .item-couplet {
            padding: 0 8px;
            box-sizing: border-box;
            .item-couplet-ITEM {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 30px;
              color: rgba(0, 0, 0, 0.45);
              .ITEM-left {
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
              }

              .ITEM-right {
                font-size: 18px;
                font-weight: bold;
                color: #595959;
                max-width: 50px;
                img {
                  width: 24px;
                  height: 22px;
                }
                .unit {
                  font-size: 14px;
                  color: rgba(108, 108, 108, 1);
                }
              }
            }
          }
          .item-bigGreen {
            color: #00c460;
            font-size: 28px;
            margin-top: 10px;
          }
          .bridge-info-item-showBox {
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            width: calc(100vw - 40px);
            overflow: hidden;
            z-index: 8;
            background: #ffffff;
            border-radius: 8px 8px 8px 8px;
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
            .item-head {
              display: flex;
              justify-content: space-between;
              position: relative;
              background: rgba(22, 93, 255, 0.05);
              height: 36px;
              color: #262626;
              padding: 0 8px;
              align-items: center;
              border-bottom: 1px solid #e6e6e6;
              .head-title {
                font-size: 14px;
              }
              .head-icon {
                width: 12px;
                height: 12px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .item-couplet {
              .item-couplet-ITEM {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 44px;
                .ITEM-left {
                  color: #595959;
                  font-size: 14px;
                  max-width: none;
                }

                .ITEM-right {
                  color: #262626;
                  font-size: 14px;
                  max-width: none;
                }
              }
            }
          }
          .item-empty {
            width: 100%;
            text-align: center;
            color: #8c8c8c;
            margin-top: 30px;
          }
        }
      }
    }  
    .bridge-list-container {
      margin: 0 20px;
      .bridge-list {
        overflow: hidden;
        width: 100%;
        margin-top: 16px;
        box-sizing: border-box;
        position: relative;
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
        .item-situation {
          padding: 0 8px;
          .situation-title {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-weight: 500;
            color: #262626;
            height: 30px;
            line-height: 30px;
            position: relative;
            font-size: 14px;
            padding-left: 8px;
            box-sizing: border-box;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 18px;
            &::after {
              content: "";
              width: 4px;
              height: 12px;
              background-color: #165dff;
              position: absolute;
              top: 14px;
              left: 0;
              transform: translateY(-50%);
            }
          }
          .situation-tabs {
            margin: 8px auto 0;
            display: flex;
            overflow: hidden;
            justify-content: center;
            .tabs-item {
              width: 60px;
              font-size: 14px;
              color: #262626;
              text-align: center;
              line-height: 32px;
              border-top: 1px solid #ececec;
              border-bottom: 1px solid #ececec;
              border-right: 1px solid #ececec;
              box-sizing: border-box;
            }
            .tabs-item:nth-child(1) {
              border-left: 1px solid #ececec;
              border-top-left-radius: 6px;
              border-bottom-left-radius: 6px;
            }
            .tabs-item:nth-child(4) {
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
            }
            .active {
              background-color: #165dff;
              color: #ffffff;
            }
          }

          .situation-echart {
            width: 100%;
            height: 170px;
            margin-top: 10px;
            .echart {
              width: 100%;
              height: 100%;
            }
          }
          .situation-echart2 {
            width: 100%;
            height: 200px;
            margin-top: 20px;
            .echart {
              width: 100%;
              height: 100%;
            }
          }

          .situation-list {
            padding: 0 10px;
            .list-item {
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              color: #8c8c8c;
              line-height: 30px;
              .item-title {
                .dot {
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: #f7f9fc;
                  margin-right: 10px;
                }
              }
            }
          }
        }
        .item-situation:nth-child(2) {
          margin-top: 20px;
        }
      }
    } 
  }
</style>